<template>
  <view class="container">
    <!-- 主要内容 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 统计卡片区域 -->
      <view class="section-title">
        <view class="title-line"></view>
        <text>监测概论</text>
      </view>
      <Monitor :type="atype"></Monitor>

      <!-- 监控数据总览 -->
      <view class="data-overview">
        <view class="section-title">
          <view class="title-line"></view>
          <text>预警通知分析</text>
        </view>

        <!-- 时间选择器和图表组合 -->
        <ChartSection :type="atype" :chart-id="'main'" />
      </view>

      <template v-if="aname === '流浪乞讨'">
        <view class="ranking-section">
          <view class="section-title">
            <view class="title-line"></view>
            <text>布控人员</text>
          </view>

          <!-- 布控人员表格 - 可控制表头和表体显示 -->
          <RankingTable
            :data="eventList"
            :headers="{
              area: '人员id',
              data: '预警数量',
            }"
          />
        </view>
        <view class="ranking-section">
          <view class="section-title">
            <view class="title-line"></view>
            <text>布控点位</text>
          </view>

          <!-- 布控点位表格 - 可控制表头和表体显示 -->
          <RankingTable
            :data="eventList"
            :headers="{
              area: '摄像头名称',
              data: '预警数量',
            }"
          />
        </view>
      </template>
      <template v-else>
        <!-- 管理场景分类 -->
        <view class="scenario-section">
          <view class="section-title">
            <view class="title-line"></view>
            <text>事件处置全流程分析</text>
          </view>

          <TimeSelector
            :periods="datePeriods"
            :active-index="dateActive"
            @change="switchDate"
          />

          <!-- 使用封装的 ScenarioGrid 组件 -->
          <ScenarioGrid
            :date="datePeriods[dateActive]"
            :type="atype"
            @item-click="handleScenarioClick"
          />
        </view>
        <!-- 区域管理排名 -->
        <view class="ranking-section">
          <view class="section-title">
            <view class="title-line"></view>
            <text>事件处置列表</text>
          </view>

          <!-- 演示默认配置（同时显示表头和表体） -->
          <RankingTable :data="eventList" :headers="eventColumn" />
        </view>
      </template>
      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onBeforeMount, onMounted } from "vue";
//组件
import Monitor from "./components/Monitor.vue";
import ChartSection from "./components/ChartSection.vue";
import ScenarioGrid from "./components/ScenarioGrid.vue";
import TimeSelector from "./components/TimeSelector.vue";
import RankingTable from "./components/RankingTable.vue";
import { onLoad } from "@dcloudio/uni-app";
import * as echarts from "echarts/dist/echarts.esm.js";
//api
import {
  cdjyApi,
  ljblApi,
  ljtmyApi,
  xfzdApi,
  zdjyApi,
  wztcApi,
  rymjApi,
  nljsApi,
  gkhzApi,
} from "@/api/index.js";

// 数据状态
const aname = ref("");
const atype = ref("");
// 时间周期
const datePeriods = ref(["日", "月", "年"]);
const dateActive = ref(0);
const eventTypes = ref({
  type: "全部",
  type2: "",
});
// 排名数据
const eventList = ref([]);
const eventColumn = ref({
  date: "时间",
  area: "发生地点",
  rank: "事件类型",
  rate: "处置状态",
});
//获取事件处置列表
const getEventDisposalList = async () => {
  console.log(datePeriods.value[dateActive.value], 212);
  const params = {
    date: datePeriods.value[dateActive.value],
    type: eventTypes.value.type,
    type2: eventTypes.value.type2,
  };
  let res = {};

  if (atype.value === "storefront_business") {
    //-出店经营
    res = await cdjyApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "garbage_exposure") {
    //-垃圾暴露
    res = await ljblApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "bin_overflow") {
    //-垃圾桶满溢
    res = await ljtmyApi.getDisposalList(
      params.date,
      params.type,
      params.type2
    );
  } else if (atype.value === "fire_road_block") {
    //-消防占道
    res = await xfzdApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "street_occupation") {
    //-占道经营
    res = await zdjyApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "illegal_parking") {
    //-违章停车
    res = await wztcApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "crowd_density") {
    //-人员密集
    res = await rymjApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "waterlogging") {
    //-内涝积水
    res = await nljsApi.getDisposalList(params.date, params.type, params.type2);
  } else if (atype.value === "high_altitude_fire") {
    //-高空火灾
    res = await gkhzApi.getDisposalList(params.date, params.type, params.type2);
  }
  if (res.data) {
    //时间、发生地点、事件类型、处置状态
    eventList.value = res.data;
    eventColumn.value = {
      发现时间: "时间",
      社区名称: "发生地点",
      小类名称: "事件类型",
      处置状态: "处置状态",
    };
  }
};
//日月年切换
const switchDate = (index) => {
  dateActive.value = index;
  //获取事件处置列表
  getEventDisposalList();
};

// 处理场景点击事件
const handleScenarioClick = (item) => {
  eventTypes.value.type = item.type;
  eventTypes.value.type2 = item.type2;
  //获取事件处置列表
  getEventDisposalList();
};

onLoad(({ name, id }) => {
  atype.value = id;
  aname.value = name;
  //获取事件处置列表
  getEventDisposalList();
  //修改标题
  uni.setNavigationBarTitle({
    title: name,
  });
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
}

.status-bar {
  background: #2196f3;
}

/* 主要内容 */
.main-content {
  flex: 1;
  background: #ffffff;
}

/* 分类标签 */
.category-tabs {
  background: #ffffff;
  border-bottom: 1rpx solid #e0e0e0;

  .tabs-scroll {
    white-space: nowrap;
  }

  .tab-list {
    display: flex;
    padding: 0 30rpx;
  }

  .tab-item {
    flex-shrink: 0;
    padding: 24rpx 32rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    color: #666;
    background: #f5f7fa;
    border-radius: 40rpx;
    transition: all 0.3s;

    &.active {
      background: #2196f3;
      color: #ffffff;
    }
  }
}

/* 通用区域标题 */
.section-title {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;

  .title-line {
    width: 6rpx;
    height: 30rpx;
    background: #2196f3;
    margin-right: 16rpx;
    border-radius: 3rpx;
  }

  text {
    flex: 1;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .more-btn {
    color: #999;
    font-size: 32rpx;
  }
}

/* 数据总览 */
.data-overview {
  margin-bottom: 20rpx;
  background: #ffffff;
}

.time-selector {
  display: flex;
  margin: 0 30rpx 30rpx;

  .time-tab {
    padding: 16rpx 32rpx;
    margin-right: 16rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f7fa;
    border-radius: 8rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s;

    &.active {
      background: #ffffff;
      border-color: #2196f3;
      color: #2196f3;
    }
  }
}

/* 图表容器 */
.chart-container {
  margin: 0 30rpx;

  #main {
    width: 100%;
    height: 400rpx;
  }
}

.chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .legend-item {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
    font-size: 24rpx;
    color: #666;

    .legend-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      margin-right: 12rpx;

      &.green {
        background: #4caf50;
      }

      &.blue {
        background: #2196f3;
      }
    }
  }

  .unit {
    margin-left: auto;
    font-size: 24rpx;
    color: #999;
  }
}

.chart-area {
  display: flex;
  height: 240rpx;
  position: relative;

  .y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60rpx;
    padding: 10rpx 0;

    .axis-value {
      font-size: 20rpx;
      color: #999;
      text-align: right;
    }
  }

  .chart-main {
    flex: 1;
    position: relative;
    margin-left: 20rpx;
    border-left: 1rpx solid #e0e0e0;
    border-bottom: 1rpx solid #e0e0e0;
  }

  .bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    padding: 0 10rpx;

    .bar-group {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 100%;

      .bar {
        width: 30rpx;
        min-height: 4rpx;
        border-radius: 2rpx 2rpx 0 0;
        position: relative;

        &.green {
          background: #4caf50;
        }

        .bar-value {
          position: absolute;
          top: -40rpx;
          left: 50%;
          transform: translateX(-50%);
          font-size: 20rpx;
          color: #333;
          background: rgba(255, 255, 255, 0.9);
          padding: 4rpx 8rpx;
          border-radius: 4rpx;
          white-space: nowrap;
        }
      }
    }
  }

  .line-chart {
    position: absolute;
    top: 0;
    left: 20rpx;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
}

.x-axis {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  margin-left: 80rpx;

  .axis-label {
    font-size: 20rpx;
    color: #999;
    text-align: center;
    line-height: 1.2;
  }
}

/* 排名表格 */
.ranking-section {
  margin-bottom: 20rpx;
  background: #ffffff;
}

.safe-area-bottom {
  height: 40rpx;
}
</style>
